<template>
  <div class="teacher-manage">
    <div class="teacher-content">
      <teacher-comp v-if="schoolId" :schoolId="schoolId" :updateMsg="updateMsg"></teacher-comp>
      <div v-else class="no-school-tip">
        <el-empty description="请先选择学校" />
      </div>
    </div>
  </div>
</template>

<script>
import TeacherComp from '@/components/schoolmanage/teacherComp.vue';
import { mapState, mapActions, mapGetters } from 'vuex';

export default {
  name: 'TeacherManage',
  components: {
    TeacherComp
  },
  data() {
    return {
      updateMsg: 0
    };
  },
  computed: {
    ...mapState('school', ['schoolList', 'currentSchoolId']),
    ...mapGetters('school', ['currentSchool']),
    schoolId() {
      return this.currentSchoolId;
    }
  },
  watch: {
    currentSchoolId: {
      handler(newVal) {
        if (newVal) {
          this.updateMsg++;
        }
      },
      immediate: true
    }
  },
  methods: {
    ...mapActions('school', ['GET_SCHOOL_LIST', 'GET_SCHOOL_OPTIONS']),
    async initData() {
      await this.GET_SCHOOL_LIST();
      if (this.currentSchoolId) {
        await this.GET_SCHOOL_OPTIONS({
          school_id: this.currentSchoolId
        });
      }
    }
  },
  created() {
    this.initData();
  }
}
</script>

<style lang="less" scoped>
.teacher-manage {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  
  .teacher-content {
    flex: 1;
    overflow: auto;
    
    .no-school-tip {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }
  }
}
</style> 